<template>
  <div class="balance-content">
    <viHeader
      :title="title"
      :radioList="radioList"
      @enlarge="enlarge"
      @changeRadio="changeRadio"
      v-if="!showHeader"
    />
    <div class="balance-main" :style="{ height: height }">
      <div class="balance-list" ref="reference"></div>
    </div>
  </div>
</template>
<script>
import viHeader from "@/components/visualization/header/index";
import echarts from "echarts";
export default {
  name: "vi-balance",
  components: {
    viHeader,
  },
  props: {
    showHeader: {
      default: false,
    },
    height: {
      default: null,
    },
    balanceList: {
      default: [],
    },
    accoutTagList: {
      default: () => [],
    },
  },
  data() {
    return {
      title: {
        name: "账户余额",
        unit: "万元",
      },
      radioList: {
        radio: "2",
        list: [],
      },
      option: {},
      series: [],
      yData: [],
      barColor: [
        //圆柱体颜色
        ["rgba(24, 144, 255, 1)", "rgba(96, 178, 255, 1)"],
        ["rgba(62, 196, 217, .7)", "rgba(101, 234, 255, .7)"],
        ["rgba(96, 216, 61, .7)", "rgba(162, 248, 137, .7)"],
        ["rgba(255, 229, 32, .7)", "rgba(255, 229, 32, .7)"],
      ],
      legend: [],
    };
  },
  mounted() {
    // this.draw();
  },
  methods: {
    draw(msg) {
      console.log(1221, msg);
      const names=msg[0].infos.map(item=>item.pName)
      const x = msg.map((item) => item.deptName);
      const y1=msg.map(item=>{
        const data=[]
        item.infos.forEach(el=>{
          if(el.pName===names[0]){
            data.push((Number(el.amount) / 10000).toFixed(3) || 0)
          }
        })
        return data[0]
      })
      const y2=msg.map(item=>{
        const data=[]
        item.infos.forEach(el=>{
          if(el.pName===names[1]){
            data.push((Number(el.amount) / 10000).toFixed(3) || 0)
          }
        })
        return data[0]
      })
      const y3=msg.map(item=>{
        const data=[]
        item.infos.forEach(el=>{
          if(el.pName===names[2]){
            data.push((Number(el.amount) / 10000).toFixed(3) || 0)
          }
        })
        return data[0]
      })
      const y4=msg.map(item=>{
        const data=[]
        item.infos.forEach(el=>{
          if(el.pName===names[3]){
            data.push((Number(el.amount) / 10000).toFixed(3) || 0)
          }
        })
        return data[0]
      })
      console.log(y1,y2,y3,y4)
      const dom = echarts.init(this.$refs.reference);
      const option = {
        legend:{},
        tooltip: {
          trigger: "axis",
          // formatter: `{b} : {c}`,
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
            shadowStyle: {
              opacity: 0.5,
            },
          },
          // trigger: "axis",
          // confine: true,
          // backgroundColor: "rgba(33, 40, 46, 1)",
          // formatter: (params) => {
          //   let tootip = "";
          //   const titleClass = `width:100%;text-align:left;font-size: 14px;font-family: Microsoft YaHei UI;font-weight: bold;color: #FFFFFF;`;
          //   const title = `<div style="${titleClass}">${params[0].name}：${
          //     params[params.length - 1].value
          //   }万元</div>`;

          //   let content = "";
          //   const contentClass = `
          //                 font-size: 12px;
          //                 font-family: Microsoft YaHei UI;
          //                 font-weight: 400;
          //                 line-height: 15px;
          //                 color: rgba(255, 255, 255, .64);
          //                 margin:4px 0;
          //                 `;
          //   params
          //     .filter((item, i) => i > 4)
          //     .forEach((item, i) => {
          //       const marker = `<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${this.barColor[i][0]};"></span>`;

          //       if (this.legend.length > i) {
          //         content += `<div style="${contentClass}">${marker}${
          //           item.seriesName
          //         }：${this.yData[params[0].dataIndex].value[i]}万元</div>`;
          //       }
          //     });

          //   tootip = tootip + title + content;
          //   return tootip;
          // },
        },
        xAxis: {
          type: "category",
          splitLine: {
            show: false,
          },
          axisLabel: {
            show: true,
            textStyle: {
              // 数值样式
              color: "rgba(68,82,121,.48)",
              fontSize: 12,
            },
          },
          axisLine: {
            lineStyle: {
              // 设置轴颜色
              color: "rgba(0,0,0,.12)",
            },
          },
          axisTick: {
            show: false,
          },
          data: x,
        },
        grid: {
          top: "22",
          bottom: "12",
          right: "26",
          left: "16",
          containLabel: true,
        },
        yAxis: {
          type: "value",
          axisTick: {
            show: false,
          },
          // show: false,
          //网格样式
          splitLine: {
            show: true,
            lineStyle: {
              color: ["rgba(0,0,0,.04)"],
              width: 1,
              type: "solid",
            },
          },
          axisLine: {
            show: false,
            lineStyle: {
              // 设置轴颜色
              color: "rgba(0,0,0,.48)",
            },
          },
        },
        series: [
          {
            name:names[0],
            type: "bar",
            data: y1,
            stack:"one",
            itemStyle: {
              normal: {
                color: this.barColor[0][0],
                // color: function (params) {
                //   if (params.value > 0) {
                //     return "#F2493C";
                //   } else {
                //     return "#45A5FF";
                //   }
                // },
                label: {
                  show: false, // 开启显示
                  position: "top", // 在上方显示
                  textStyle: {
                    // 数值样式
                    color: "rgba(68,82,121,.48)",
                    fontSize: 16,
                  },
                },
              },
            },
            type: "bar",
            barWidth: 12,
          },
          {
            name:names[1],
            type: "bar",
            data: y2,
            stack:"one",
            itemStyle: {
              normal: {
                color: this.barColor[1][0],
                // color: function (params) {
                //   if (params.value > 0) {
                //     return "#F2493C";
                //   } else {
                //     return "#45A5FF";
                //   }
                // },
                label: {
                  show: false, // 开启显示
                  position: "top", // 在上方显示
                  textStyle: {
                    // 数值样式
                    color: "rgba(68,82,121,.48)",
                    fontSize: 16,
                  },
                },
              },
              
            },
            type: "bar",
            barWidth: 12,
          },
          {
            name:names[2],
            type: "bar",
            data: y3,
            stack:"one",
            itemStyle: {
              normal: {
                color: this.barColor[2][0],
                // color: function (params) {
                //   if (params.value > 0) {
                //     return "#F2493C";
                //   } else {
                //     return "#45A5FF";
                //   }
                // },
                label: {
                  show: false, // 开启显示
                  position: "top", // 在上方显示
                  textStyle: {
                    // 数值样式
                    color: "rgba(68,82,121,.48)",
                    fontSize: 16,
                  },
                },
              },
            },
            type: "bar",
            barWidth: 12,
          },
          {
            name:names[3],
            type: "bar",
            data: y4,
            stack:"one",
            itemStyle: {
              normal: {
                color: this.barColor[3][0],
                // color: function (params) {
                //   if (params.value > 0) {
                //     return "#F2493C";
                //   } else {
                //     return "#45A5FF";
                //   }
                // },
                label: {
                  show: false, // 开启显示
                  position: "top", // 在上方显示
                  textStyle: {
                    // 数值样式
                    color: "rgba(68,82,121,.48)",
                    fontSize: 16,
                  },
                },
              },
            },
            type: "bar",
            barWidth: 12,
          },
        ],
      };
      dom.setOption(option);
      window.addEventListener("resize", () => {
        dom.resize();
      });
    },
    enlarge() {
      this.$emit("enlarge");
    },
    changeRadio(val) {
      console.log(val);
    },
  },
};
</script>

<style scoped lang="scss">
// @import "../styles/balance.scss";
@import "@/components/visualization/styles/function.scss";

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.balance-content {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;

  .balance-main {
    width: 100%;
    height: calc(100% - 50px);
    overflow: auto;
    padding: vw(0) vw(12) vw(16) vw(12);

    .balance-list {
      width: 100%;
      height: 100%;
      overflow: hidden;
    }
  }
}
</style>
